import { Layout, Steps, Input } from 'antd';
import { UserOutlined, MessageTwoTone } from '@ant-design/icons';
import React from 'react';
import './index.scss';
const { Header, Content } = Layout;
const { Step } = Steps;
const { TextArea } = Input;

export default class MainView extends React.Component {
    constructor() {
        super();
        this.state = {
            inputText: '',
            msgList: [{type: '', text: 'What do you want to watch today?'}]
        };
    }

    handleSendMsg(e) {
        e.preventDefault();
        this.setState((prev) => ({msgList: prev.msgList.concat({
            type: 'me',
            text: this.state.text
        })}));
        this.setState({ text: '' });
        setTimeout(() => {
            this.setState((prev) => ({msgList: prev.msgList.concat({
                type: '',
                text: 'Ok, I got it'
            })}))
            setTimeout(() => {
                this.setState((prev) => ({msgList: prev.msgList.concat({
                    type: '',
                    text: 'So, what style do you like?'
                })}))
            }, 1000)
        }, 1000)
    }

    render() {
        const { text } = this.state;
        return (
            <div>
                <div className="header">Let's start from a few questions</div>
                <div className="msg_body">
                    {(this.state.msgList.map((o) => (
                        (o.type === 'me' ? (
                            <div className={`msg_box ${o.type}`}>
                                <div className="msg_text">{ o.text }</div>
                                <UserOutlined style={{ fontSize: 40 }}/>
                            </div>
                        ) : (
                            <div className={`msg_box ${o.type}`}>
                                <UserOutlined style={{ fontSize: 40 }}/>
                                <div className="msg_text">{ o.text }</div>
                            </div>
                        ))
                    )))}
                </div>
                <div className="footer">
                    <TextArea size="large" onPressEnter={(e) => this.handleSendMsg(e)} showCount autoSize={{ minRows: 1, maxRows: 3 }} value={text} onChange={(e) => this.setState({text: e.target.value})} />
                    <MessageTwoTone onClick={(e) => this.handleSendMsg(e)} style={{ fontSize: 30, marginLeft: 15, transform: 'translateY(-3px)' }} />
                </div>
            </div>
        )
    }
}